<template>
  <div class="home">
    <v-Head></v-Head>
    <!-- 头部走马灯 -->
    <div class="Scroll">
      <span>
        <i class="fa fa-volume-up"></i>
        最新公共
      </span>
      <div>
        <el-carousel height="120px" direction="vertical" :autoplay="true">
          <el-carousel-item v-for="(item, index) in scrollData" :key="index">
            <span>{{ item.title }}</span>
            <span>{{ item.content }}</span>
            <span
              >{{ item.createtime.split("T")[0] }}
              {{ item.createtime.split("T")[1].split(".")[0] }}</span
            >
            <span @click="linkMore">更多123456</span>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="Main">
      <!-- 计数模块 -->
      <div class="f4">
        <div>
          <i
            aria-hidden="true"
            class="fa fa-user"
            style="font-size: 66px; color: rgb(56, 154, 249);"
          ></i>
          <b>{{ dem1 }}</b>
          <p>系统用户数</p>
        </div>
        <div>
          <i
            aria-hidden="true"
            class="fa fa-file-text-o"
            style="font-size: 66px; color: rgb(174, 232, 106);"
          ></i>
          <b>{{ dem2 }}</b>
          <p>计费订单数量</p>
        </div>
        <div>
          <i
            aria-hidden="true"
            class="fa fa-car"
            style="font-size: 66px; color: rgb(242, 185, 14);"
          ></i>
          <b>{{ dem3 }}</b>
          <p>车位总量</p>
        </div>
        <div>
          <i
            aria-hidden="true"
            class="fa fa-pencil-square-o"
            style="font-size: 66px; color: rgb(178, 139, 124);"
          ></i>
          <b>{{ dem4 }}</b>
          <p>用户反馈数量</p>
        </div>
      </div>
    </div>
    <div class="Echarts">
      <div>
        <neitghbourhoods></neitghbourhoods>
      </div>
      <div>
        <car></car>
      </div>
      <div>
        <pay></pay>
      </div>
    </div>
    <div class="EchartsS">
      <div style="width: 72%;">
        <brokenLine></brokenLine>
      </div>
      <div style="width: 26%;">
        <el-table
          :data="tableData"
          style="width: 100%;"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            prop="repaircontent"
            label="维修内容"
            width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="createtime"
            label="报修时间"
            width="140"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="resultstatus" label="状态" width="60">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>状态 {{ scope.row.resultstatus }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">
                    <span
                      style="height: 60%; color: rgb(126, 185, 130); border-color: rgba(186, 255, 151, 0.37); font-size: 12px; background-color: rgba(186, 255, 151, 0.37);"
                      v-show="scope.row.resultstatus == '1'"
                      >已修复</span
                    >
                    <span
                      style="height: 60%; color: rgb(223, 143, 42); border-color: rgba(255, 208, 156, 0.43); background-color: rgba(255, 208, 156, 0.43);"
                      v-show="scope.row.resultstatus != '1'"
                      >待处理</span
                    >
                  </el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page-sync="page"
          :page-sizes="[4]"
          :page-size="rows"
          layout="total, sizes, prev, pager, next"
          :total="tableDatas"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../components/header";
import neitghbourhoods from "../Echarts/neitghbourhoods.vue";
import car from "../Echarts/car.vue";
import pay from "../Echarts/pay.vue";
import brokenLine from "../Echarts/brokenLine.vue";
export default {
  name: "index",
  components: {
    vHead,
    neitghbourhoods,
    car,
    pay,
    brokenLine,
  },
  data() {
    return {
      // 获取走马灯数据
      scrollData: [],
      queryInfo: {
        currPage: 0,
        pageNum: 10,
      },
      //计算模块数据
      dem1: 0,
      dem2: 0,
      dem3: 0,
      dem4: 0,
      tableData: [],
      tableDatas: 0,
      page: 0,
      rows: 4,
    };
  },
  methods: {
    async getScroll() {
      let resScroll = await this.$axios({
        url: "/poster/getPosterData",
        method: "get",
        params: this.queryInfo,
      });
      //   console.log(resScroll);
      this.scrollData = resScroll.data.data;
      //   console.log(this.scrollData);
    },
    // 更多跳转页面
    linkMore() {
      this.$router.push("/service/postMessage");
    },
    // 系统用户数
    users() {
      this.$axios
        .get("/users/getUsersData", {
          params: {
            currPage: 0,
            pageNum: 10,
          },
        })
        .then((res) => {
          // console.log(res);
          this.dem1 = res.data.total;
        });
    }, // 计费订单数量
    single() {
      this.$axios
        .get("cost/getPayMessage", {
          params: {
            currPage: 0,
            pageNum: 10,
          },
        })
        .then((res) => {
          // console.log(res);
          this.dem2 = res.data.total;
        });
    }, // 车位总量
    car() {
      this.$axios
        .get("/parking/getParkOrder", {
          params: {
            currPage: 0,
            pageNum: 4,
          },
        })
        .then((res) => {
          // console.log(res);
          this.dem3 = res.data.total;
        });
    },
    feed() {
      this.$axios
        .get("/poster/getFeedBack", {
          params: {
            currPage: 0,
            pageNum: 4,
          },
        })
        .then((res) => {
          // console.log(res);
          this.dem4 = res.data.total;
        });
    },
    //table表格
    GitList() {
      this.$axios
        .get("/poster/getRepairData", {
          params: {
            currPage: this.page,
            pageNum: this.rows,
          },
        })
        .then((res) => {
          //   console.log(res);
          this.tableDatas = res.data.total;
          this.tableData = res.data.data;
          for (let i = 0; i < res.data.data.length; i++) {
            let t1 = res.data.data[i].createtime.split("T");
            let t2 = t1[1].split(".");
            t2 = t2[0].split(":");
            t2[0] = parseInt(t2[0]);
            t2[0] = t2[0] + 8;
            t2[0] = String(t2[0]);
            t2 = t2[0] + ":" + t2[1] + ":" + t2[2];
            res.data.data[i].createtime = t1[0] + " " + t2;
          }
          //   console.log(this.repaircontent);
        });
    },
    handleSizeChange(val) {
      this.rows = val;
      this.GitList();
      //   console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val - 1;
      this.currPage += 1;
      this.GitList();
      //   console.log(`当前页: ${val}`);
    },
    quarters() {
      this.$axios
        .get("/house/searchList", {
          params: {
            unitname: "A",
            currPage: 1,
            pageNum: 4,
          },
        })
        .then((res) => {
          //   console.log(res);
          this.labList = res.data.total;
          parseInt(this.labList);
          //   console.log(this.labList);
          // data[0].value=this.labList
        });
    },
  },
  mounted() {
    this.getScroll();
    this.users();
    this.single();
    this.car();
    this.feed();
    this.quarters();
    this.GitList();
  },
};
</script>
<style lang="scss" scoped>
// Echarts图标样式
.Echarts {
  //   position: absolute;
  width: 98.6%;
  height: 350px;
  margin-top: 145px;
  margin-left: 1%;
  margin-right: 1%;
  display: flex;
  justify-content: space-between;
}
.EchartsS {
  //   position: absolute;
  //   width: 98.6%;
  //   height: 350px;
  margin-top: 20px;
  margin-left: 1%;
  margin-right: 1%;
  display: flex;
  justify-content: space-between;
}
.EchartsS > div {
  box-sizing: border-box;
  width: 80%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin: 0 10px 0 10px;
  padding-top: 10px;
  background-color: white;
}
.Echarts > div {
  box-sizing: border-box;
  width: 80%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin: 0 10px 0 10px;
  padding-top: 10px;
  background-color: white;
}
.home {
  background-color: #f0f0f0;
  width: 100%;
  //   height: 836px;
}
// 技术模块样式
.f4 {
  position: absolute;
  width: 98.6%;
  height: 130px;
  margin-top: 20px;
  margin-left: 1%;
  margin-right: 1%;
  display: flex;
  justify-content: space-between;
}
.f4 > div {
  box-sizing: border-box;
  width: 80%;
  height: 110px;
  padding-left: 6px;
  padding-right: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  margin: 0 10px 0 10px;
  background-color: white;
  position: relative;
}
.f4 > div > p {
  font-size: 14px;
  position: absolute;
  bottom: 25px;
  right: 85px;
}
.f4 > div > b {
  font-size: 32px;
  position: absolute;
  top: 21px;
  right: 115px;
}
.f4 > div:nth-child(3) b {
  right: 70px;
}
.f4 > div:last-child b {
  right: 150px;
}
.f4 > div > i {
  position: absolute;
  top: 22px;
  left: 50px;
}
// 走马灯样式
.Scroll {
  background-color: white;
}
.Scroll > div {
  margin-left: 70px;
}
.Scroll > span {
  font-weight: 700;
  color: #4995f7;
  position: absolute;
  top: 58px;
  padding: 18px;
  font-size: 14px;
}
.el-carousel__item {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  flex-direction: row;
  transform: translate(0px, -1045.5px);
  overflow: hidden;
}
.el-carousel__item span {
  //   color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  //   margin: 0;
  margin-top: -8px;
  font-weight: 700;
}
.el-carousel__item span:last-child {
  color: blue;
  cursor: pointer;
}
::v-deep .el-carousel__indicator--vertical {
  display: none;
}
</style>
